<template>
  <div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      height="1050">
      <el-table-column
        prop="uid"
        label="UID">
      </el-table-column>
      <el-table-column
        prop="userName"
        label="昵称">
      </el-table-column>
      <el-table-column
        prop="sex"
        label="性别">
      </el-table-column>
      <el-table-column
        prop="vipLv"
        label="VIP等级">
      </el-table-column>
      <el-table-column
        prop="gold"
        label="金币">
      </el-table-column>
      <el-table-column
        prop="bankGold"
        label="银行">
      </el-table-column>
      <el-table-column
        prop="freeze"
        label="冻结">
      </el-table-column>
      <el-table-column
        prop="createTime"
        label="注册时间">
      </el-table-column>
      <el-table-column
        prop="loginTime"
        label="上线时间">
      </el-table-column>
      <el-table-column
        prop="logoutTime"
        label="下线时间">
      </el-table-column>
      <el-table-column
        prop="address"
        label="IP">
      </el-table-column>
      <!--<el-table-column-->
        <!--fixed="right"-->
        <!--label="操作"-->
        <!--width="100">-->
        <!--<template slot-scope="scope">-->
          <!--<el-button @click="handleClick(scope.row)" type="primary" icon="el-icon-edit" circle size="mini"></el-button>-->
          <!--<el-button @click="closeClick(scope.$index,tableData)" type="danger" icon="el-icon-delete" circle size="mini"></el-button>-->
        <!--</template>-->
      <!--</el-table-column>-->
    </el-table>
    <!--分页-->
    <el-pagination
      v-show="allSize > 30"
      style="margin-top: 20px"
      background
      layout="prev, pager, next"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :total="allSize"
      :page-size="pageSize">
    </el-pagination>
  </div>

</template>

<script>
  import axios from 'axios'
  const pageSizeConst = 30;
  export default {
    created(){
      this.onSearchClick();
      //搜索
    },
    methods: {
      handleCurrentChange: function(currentPage){
        this.currentPage = currentPage;
        this.onSearchClick()
      },
      onSearchClick(){
        axios.get("/infolist",{
          params:{
            pageSize: pageSizeConst,
            currentPage: this.currentPage,
          }
        }).then(resp => {
          if(resp.data.result){
            this.tableData = resp.data.msg.data
            this.allSize = resp.data.msg.count
          }
        })
      },
      handleClick(row) {
        this.$router.push({
          path : '/userEdit',
          query:{
            uid : row.uid,
            userName: row.userName,
            scenes: 'userList'
          }
        });
      },
      closeClick(index,rows){
        let row = rows[index]
        this.$confirm('是否将玩家<<'+row.userName+'>>封号并且踢下线?', '封号', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          axios.get("/kicking",{
            params:{
              uid:row.uid
            }
          }).then(resp => {
            if(resp.data.result){
              rows.splice(index, 1);
              //请求服务器是否可以封号
              this.$message({
                type: 'success',
                message: resp.data.msg
              });
            }else {
              this.$message({
                type: 'success',
                message: resp.data.error
              });
            }
          })

        }).catch(() => {
          console.log('取消');
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
    },
    data() {
      return {
        tableData: [],
        currentPage: 1,
        pageSize: pageSizeConst,
        allSize: 0
      }
    }
  }
</script>

<style scoped>

</style>
